/* 1.公共属性样式  .xxx{} */

/* 版心 */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* 测试工具 */
.bd {
  border: 1px solid red;
}

/* 浮动 */
.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix::after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

/* margin */
.mt18 {
  margin-top: 18px;
}

.mtb20 {
  margin: 20px 0;
}

.mr30 {
  margin-right: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mt20 {
  margin-top: 20px;
}

/* padding */
.ptb100 {
  padding: 100px 0;
}

/* head */
.head {
  width: 100%;
  height: 67px;
  border-bottom: 1px solid #fff;
  padding: 0 30px;
  box-sizing: border-box;

  position: absolute;
  z-index: 100;
}
.head-logo {
  padding-top: 12px;
}

.head-login,
.head-register {
  /* float: left; */ /* 块级格式上下文 */
  border: 1px solid #ccc;
  padding: 4px 12px;
  border-radius: 30px;
  color: #fff;
}

.head-register {
  background-color: #ed510a;
  border: none;
}

.head-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.head-nav li {
  float: left;
  margin: 0 20px;
  line-height: 65px;
}

.head-nav li a {
  color: #fff;
}

.head-nav .active,
.head-nav li:hover {
  border-bottom: 3px solid #fff;
}
